Improve login layout with proper labels by nooreldeenmansour · Pull Request #1266 · canonical/authd

nooreldeenmansour · 2026-02-13T09:39:45Z

I've tested these changes on LXD container, for the QR code testing, I've used lxc console command. I'm unsure if this is the ideal way or not.

Note: I've ran the tests locally with the TESTS_UPDATE_GOLDEN flag, and it edited multiple test files, which I commited to a separate branch nooreldeenmansour@35b1378. Should I cherry-pick this commit to this PR?

SSH (Before)

== Device Authentication ==
Open the URL and enter the code below.
https://www.google.com/device
        CHD-DSN-RNTH

  1. Wait for authentication result
  2. Request new code

SSH (After)

== Device Authentication ==
Open the URL and enter the code below.

URL: https://www.google.com/device
Code: ZRF-FDP-XRFV

  1. Wait for authentication result
  2. Request new code

QR (Before)

██████████████████████████████████████████████████████████████████████████
██████████████████████████████████████████████████████████████████████████
██████████████████████████████████████████████████████████████████████████
██████████████████████████████████████████████████████████████████████████
                      https://www.google.com/device
                               GGM-WRP-FNNF

                            [ Request new code ]

QR (After)

██████████████████████████████████████████████████████████████████████████
██████████████████████████████████████████████████████████████████████████
██████████████████████████████████████████████████████████████████████████
██████████████████████████████████████████████████████████████████████████
                      https://www.google.com/device
                            Code: GJZ-VYM-QKBJ

                            [ Request new code ]

UDENG-9622

edibotopic · 2026-02-13T11:34:53Z

Thanks @nooreldeensalah

QR (After)

██████████████████████████████████████████████████████████████████████████
██████████████████████████████████████████████████████████████████████████
██████████████████████████████████████████████████████████████████████████
██████████████████████████████████████████████████████████████████████████
                      https://www.google.com/device
                            Code: GJZ-VYM-QKBJ

                            [ Request new code ]

For consistency with the SSH interface, shouldn't a label also be prepended to the URL here, like so:

██████████████████████████████████████████████████████████████████████████
██████████████████████████████████████████████████████████████████████████
██████████████████████████████████████████████████████████████████████████
██████████████████████████████████████████████████████████████████████████
                      URL: https://www.google.com/device
                            Code: GJZ-VYM-QKBJ

                            [ Request new code ]

nooreldeenmansour · 2026-02-13T11:50:58Z

I've updated it as suggested @edibotopic, I initially followed the suggestion from this comment regarding the label becoming long on the issue.

Let me know if any more changes are needed!

This is how it looks like now (from lxc console output)

██████████████████████████████████████████████████████████████████████████
██████████████████████████████████████████████████████████████████████████
██████████████████████████████████████████████████████████████████████████
                    URL: https://www.google.com/device
                            Code: TGM-DRC-BRMX

                            [ Request new code ]

edibotopic · 2026-02-13T12:06:44Z

I've updated it as suggested @edibotopic, I initially followed the suggestion from this #1263 (comment) regarding the label becoming long on the issue.

Thanks. I think it's more visually consistent. The URL is first mentioned many lines before the QR, so it's no harm to be maximally explicit about what we are referring to, so that the connection is clear and the user can scan the text efficiently.

But also, I'm not sure there is any practical advantage to centering the text for the URL and Code below the QR; if anything, it makes the text less readable. And the original comment was about the string being too long when centering is applied.

So, I think this would be fine:

██████████████████████████████████████████████████████████████████████████
██████████████████████████████████████████████████████████████████████████
██████████████████████████████████████████████████████████████████████████

URL:  https://www.google.com/device
Code: TGM-DRC-BRMX

                            [ Request new code ]

I think that it makes more sense to have [Request new code] set apart by centering.

I'm not testing this, but I would also suggest (as shown in my example above) adding a newline between the QR and the strings below (if it doesn't exist already) for clearer visual separation.

Any issue with the reasoning above @adombeck ?

nooreldeenmansour · 2026-02-13T12:53:36Z

Current layout after the latest commit

██████████████████████████████████████████████████████████████████████████
██████████████████████████████████████████████████████████████████████████
██████████████████████████████████████████████████████████████████████████

URL: https://www.google.com/device
Code: JZF-DRK-LNKH

                            [ Request new code ]

adombeck · 2026-02-13T16:05:19Z

Any issue with the reasoning above @adombeck ?

Not at all. It makes sense to me, even though I was initially a bit hesitant to replace the center alignment with left alignment, because I found it visually appealing. However, I agree that, when combined with the labels, the left alignment makes it more readable.

adombeck · 2026-02-13T16:13:55Z

pam/internal/adapter/nativemodel.go

@@ -731,11 +734,10 @@ func (m nativeModel) handleQrCode() tea.Cmd {
 		firstQrCodeLine = m.uiLayout.GetContent()


The linter complains about an ineffectual assignment to firstQrCodeLine in this line. It's correct, the variable is not used anymore, you now directly use m.uiLayout.GetContent() as the URL - which makes sense to me, because we pass the content as the URL and also use it to generate the QR code. I wonder why we tried to use the first line of the rendered QR code instead. Do you remember, @3v1n0?

adombeck · 2026-02-13T16:17:46Z

pam/internal/adapter/nativemodel.go

+		qrcodeView = append(qrcodeView, fmt.Sprintf("Code: %s", code))
 	}


Let's add another space between the URL: label and the URL, to make it align with the code, as @edibotopic suggested in #1266 (comment):

Suggested change

qrcodeView = append(qrcodeView, fmt.Sprintf("Code: %s", code))

}

qrcodeView = append(qrcodeView, fmt.Sprintf("URL: %s", m.uiLayout.GetContent()))

qrcodeView = append(qrcodeView, fmt.Sprintf("Code: %s", code))

} else {

qrcodeView = append(qrcodeView, fmt.Sprintf("URL: %s", m.uiLayout.GetContent()))

}

adombeck · 2026-02-13T16:24:10Z

I've tested these changes on LXD container, for the QR code testing, I've used lxc console command. I'm unsure if this is the ideal way or not.

That seems reasonable since this change should only affect the command-line interface. When testing changes which involve gnome-shell / GDM, you will probably want to set up a VM and share the authd repository between your host and the VM. I can help you with that.

adombeck · 2026-02-13T16:27:32Z

Note: I've ran the tests locally with the TESTS_UPDATE_GOLDEN flag, and it edited multiple test files, which I commited to a separate branch nooreldeenmansour@35b1378. Should I cherry-pick this commit to this PR?

Yes, please! That will hopefully fix the tests which are currently failing (beside the flaky ones - if you see the "Retry Go Tests with Coverage Collection" job fail, that's a quite reliable indication that there's actually something wrong).

nooreldeenmansour · 2026-02-13T17:27:49Z

I've tested these changes on LXD container, for the QR code testing, I've used lxc console command. I'm unsure if this is the ideal way or not.

That seems reasonable since this change should only affect the command-line interface. When testing changes which involve gnome-shell / GDM, you will probably want to set up a VM and share the authd repository between your host and the VM. I can help you with that.

Thanks, I appreciate that! it would definitely be helpful :)

I've re-generated the golden tests, and pushed them in my latest commit. And I've addressed your latest suggestions as well.

Current layout after adding the whitespace:

SSH

== Device Authentication ==
Open the URL and enter the code below.

URL:  https://www.google.com/device
Code: MLT-TGC-ZDNF

  1. Wait for authentication result
  2. Request new code

QR

██████████████████████████████████████████████████████████████████████████
██████████████████████████████████████████████████████████████████████████

URL:  https://www.google.com/device
Code: RMX-HWJ-SNHY

                            [ Request new code ]

codecov · 2026-02-13T17:38:52Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 86.33%. Comparing base (f1f2832) to head (2003bc0).
⚠️ Report is 2 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #1266      +/-   ##
==========================================
+ Coverage   86.24%   86.33%   +0.08%     
==========================================
  Files          99       99              
  Lines        6690     6679      -11     
  Branches      111      111              
==========================================
- Hits         5770     5766       -4     
+ Misses        860      857       -3     
+ Partials       60       56       -4

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

adombeck · 2026-04-06T08:56:52Z

These changes might affect our e2e-tests, so I want to see some e2e-test results before merging this. However, the e2e-tests are not run because of the

Error when evaluating 'secrets'. .github/workflows/e2e-tests.yaml (Line: 79, Col: 11): Secret E2E_VM_SSH_PRIV_KEY is required, but not provided while calling., .github/workflows/e2e-tests.yaml (Line: 79, Col: 11): Secret E2E_VM_SSH_PUB_KEY is required, but not provided while calling.

issue. That will be fixed by #1384, so let's wait for that to be merged and then rebase.

nooreldeenmansour force-pushed the improve-cli-login-layout branch from dfce212 to e1d3bb7 Compare February 13, 2026 11:45

adombeck reviewed Feb 13, 2026

View reviewed changes

nooreldeenmansour force-pushed the improve-cli-login-layout branch 2 times, most recently from 18104bd to e802ab7 Compare February 13, 2026 17:22

shiv-tyagi mentioned this pull request Feb 13, 2026

Improve layout of CLI login prompt without QR code #1263

Open

adombeck force-pushed the improve-cli-login-layout branch from e802ab7 to 125e326 Compare April 6, 2026 08:52

adombeck force-pushed the improve-cli-login-layout branch from 125e326 to cbf6ed1 Compare April 6, 2026 10:18

nooreldeenmansour added 3 commits April 8, 2026 00:46

Improve login layout with proper labels

513cd3e

left-align labels in QR code layout for consistency

9174121

tests: improve layout of login prompt with proper labels and alignment

2003bc0

adombeck force-pushed the improve-cli-login-layout branch from cbf6ed1 to 2003bc0 Compare April 7, 2026 22:46

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve login layout with proper labels#1266

Improve login layout with proper labels#1266
nooreldeenmansour wants to merge 3 commits intocanonical:mainfrom
nooreldeenmansour:improve-cli-login-layout

nooreldeenmansour commented Feb 13, 2026 •

edited

Loading

Uh oh!

edibotopic commented Feb 13, 2026

Uh oh!

nooreldeenmansour commented Feb 13, 2026

Uh oh!

edibotopic commented Feb 13, 2026 •

edited

Loading

Uh oh!

nooreldeenmansour commented Feb 13, 2026

Uh oh!

adombeck commented Feb 13, 2026

Uh oh!

adombeck Feb 13, 2026

Uh oh!

adombeck Feb 13, 2026

Uh oh!

adombeck commented Feb 13, 2026

Uh oh!

adombeck commented Feb 13, 2026

Uh oh!

nooreldeenmansour commented Feb 13, 2026

Uh oh!

codecov bot commented Feb 13, 2026 •

edited

Loading

Uh oh!

adombeck commented Apr 6, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		@@ -731,11 +734,10 @@ func (m nativeModel) handleQrCode() tea.Cmd {
		firstQrCodeLine = m.uiLayout.GetContent()

		qrcodeView = append(qrcodeView, fmt.Sprintf("Code: %s", code))
		}

-		qrcodeView = append(qrcodeView, fmt.Sprintf("Code: %s", code))
-	}
+		qrcodeView = append(qrcodeView, fmt.Sprintf("URL:  %s", m.uiLayout.GetContent()))
+		qrcodeView = append(qrcodeView, fmt.Sprintf("Code: %s", code))
+} else {
+		qrcodeView = append(qrcodeView, fmt.Sprintf("URL: %s", m.uiLayout.GetContent()))
+}

Conversation

nooreldeenmansour commented Feb 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

SSH (Before)

SSH (After)

QR (Before)

QR (After)

Uh oh!

edibotopic commented Feb 13, 2026

Uh oh!

nooreldeenmansour commented Feb 13, 2026

Uh oh!

edibotopic commented Feb 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

nooreldeenmansour commented Feb 13, 2026

Uh oh!

adombeck commented Feb 13, 2026

Uh oh!

adombeck Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

adombeck Feb 13, 2026

Choose a reason for hiding this comment

Uh oh!

adombeck commented Feb 13, 2026

Uh oh!

adombeck commented Feb 13, 2026

Uh oh!

nooreldeenmansour commented Feb 13, 2026

SSH

QR

Uh oh!

codecov bot commented Feb 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

adombeck commented Apr 6, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

nooreldeenmansour commented Feb 13, 2026 •

edited

Loading

edibotopic commented Feb 13, 2026 •

edited

Loading

codecov bot commented Feb 13, 2026 •

edited

Loading